<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('指定输入框展示的字段名称')}`">{{ $t('指定输入框展示的字段名称') }}</t>
            <li>
                使用<span class="s-code">optionProps</span>可以指定输入框内展示的字段名称，以及子数据行对应的字段名
            </li>
            <li>
                默认情况下，当选择完数据时，组件内部会将数据行内的<span class="s-code">"name"</span>对应的值回填到输入框内作为展示。
                你可以通过<span class="s-code">optionProps.label</span>来修改它
            </li>
            <li>
                当<span class="s-code">tableData</span>数据内存在子数据行时，组件内部会自带将其展示为树形列表，
                默认情况下，组件内部是根据数据行内的<span class="s-code">"children"</span>字段来判断有无子数据行。
                当然，你也可以通过<span class="s-code">optionProps.children</span>来修改该判读字段的名称
            </li>
        </template>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'table',
            required: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                {
                    name: '张三',
                    code: '001',
                    id: '1',
                    son: [{ name: '张三的儿子', code: '001-1', id: '12' }],
                },
                {
                    name: '李四',
                    code: '002',
                    id: '2',
                    son: [{ name: '李四的儿子', code: '002-1', id: '22' }],
                },
                {
                    name: '王五',
                    code: '003',
                    id: '3',
                    son: [{ name: '王五的儿子', code: '003-1', id: '32' }],
                },
            ],
            optionProps: {
                label: 'code',
                value: 'id',
                children: 'son',
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'table',
            required: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                {
                    name: '张三',
                    code: '001',
                    id: '1',
                    son: [{ name: '张三的儿子', code: '001-1', id: '12' }],
                },
                {
                    name: '李四',
                    code: '002',
                    id: '2',
                    son: [{ name: '李四的儿子', code: '002-1', id: '22' }],
                },
                {
                    name: '王五',
                    code: '003',
                    id: '3',
                    son: [{ name: '王五的儿子', code: '003-1', id: '32' }],
                },
            ],
            optionProps: {
                label: 'code',
                value: 'id',
                children: 'son',
            },
        };

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
